<template>
  <div>
    <el-page-header @back="$router.push('/control/risk')" content="风险管理详情"> </el-page-header>
    <div class="sec-detail-main">
      <el-tabs v-model="tabModel" type="border-card" @tab-click="tabClick">
        <el-tab-pane label="风险信息" name="风险信息">
          <secDescriptions
            :data="riskInfo.value"
            :colon="true"
            :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
            :contentStyle="{ 'line-height': '36px' }"
            :column="2"
            :border="false"
            :keyData="riskInfo.key"
            title="基础信息"
          >
          </secDescriptions>
        </el-tab-pane>
        <el-tab-pane label="资产信息" name="资产信息">
          <secAuthBaseInfo v-if="assetType === 'UPM'" :isEdit="false" :data="upmContentData"></secAuthBaseInfo>
          <secDescriptions
            v-else-if="assetType === 'SSO'"
            :data="property.subsystemValue"
            :colon="true"
            :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
            :contentStyle="{ 'line-height': '36px' }"
            :column="2"
            :border="false"
            :keyData="property.subsystemKey"
            title="基础信息"
          >
            <template v-slot:gitList>
              <el-tag
                v-for="(item, index) in property.subsystemValue.gitList"
                style="margin: 0 5px 5px 0"
                :key="index"
                >{{ item }}</el-tag
              >
            </template>
          </secDescriptions>
          <secDescriptions
            v-else
            :data="property.value"
            :colon="true"
            :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
            :contentStyle="{ 'line-height': '36px' }"
            :column="2"
            :border="false"
            :keyData="property.key"
            title="基础信息"
          >
          </secDescriptions>
        </el-tab-pane>
        <el-tab-pane label="指标信息" name="指标信息">
          <secDescriptions
            :data="indexInfo.value"
            :colon="true"
            :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
            :contentStyle="{ 'line-height': '36px' }"
            :column="2"
            :border="false"
            :keyData="indexInfo.key"
            title="基础信息"
          >
          </secDescriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import secDescriptions from "components/descriptions/myDescriptions";
import { riskDetailApi } from "api/controlApi";
import { assetsDetailApi } from "api/evaluateApi";
import { upmAssetDetailApi } from "api/authApi";
import { itemGetAPI } from "api/configApi";
import { assetsSubsystemDetail } from "api/propertyManage.js";
import secAuthBaseInfo from "@/views/propertyCenter/authManage/components/baseInfo.vue";

export default {
  name: "riskManageDetail",
  props: {},
  components: {
    secDescriptions,
    secAuthBaseInfo,
  },
  data() {
    return {
      upmContentData: {}, //权限审计 upm的审计项
      query: {},
      tabModel: "风险信息",
      // 详情==》风险信息
      riskInfo: {
        key: [
          { label: "风险名称", prop: "riskName" },
          { label: "风险类型", prop: "holeType" },
          {
            label: "风险等级",
            prop: "level",
            formatter: (data) => {
              return this.utils.getDicLabel("level", data.level);
            },
          },
          {
            label: "风险状态",
            prop: "status",
            formatter: (data) => {
              return this.utils.getDicLabel(100700, data.status);
            },
          },
          { label: "创建时间", prop: "createTimeText" },
          { label: "风险来源", prop: "dateType" },
          { label: "审计任务ID", prop: "relationId" },
          { label: "风险描述", prop: "holeDetail" },
          { label: "修复建议", prop: "repairRecommend" },
        ],
        value: {},
      },
      //资产的信息
      property: {
        key: [
          {
            label: "资产来源",
            prop: "source",
            formatter: (data) => {
              return this.utils.getDicLabel(100100, data.source);
            },
          },
          // { label: "logid", prop: "logid" },
          { label: "资产ID", prop: "ID" },
          { label: "域名", prop: "domain" },
          { label: "场景名称", prop: "sceneName" },
          { label: "权属负责人", prop: "leaderName" },
          { label: "权属部门", prop: "dept2" },
          {
            label: "资产级别",
            prop: "importSystem",
            formatter: (data) => {
              return this.utils.getDicLabel(100400, data.importSystem);
            },
          },
          {
            label: "访问性",
            prop: "netDev",
            formatter: (data) => {
              return this.utils.getDicLabel("100200", data.netDev);
            },
          },
          {
            label: "资产状态",
            prop: "status",
            formatter: (data) => {
              return this.utils.getDicLabel("100500", data.status);
            },
          },
          // { label: "安全评分", prop: "domain" },
          {
            label: "资产类型",
            prop: "scanDev",
            formatter: (data) => {
              return this.utils.getDicLabel("scanDev", data.status);
            },
          },
          { label: "录入时间", prop: "createTimeText" },
          { label: "集群环境", prop: "cluster" },
          { label: "国家码", prop: "ctCode" },
          { label: "敏感时间", prop: "intervalDate" },
          { label: "敏感间隔（天）", prop: "intervalDays" },
          { label: "备注", prop: "remark1" },
        ],
        subsystemKey: [
          {
            label: "资产来源",
            prop: "source",
            formatter: (data) => {
              return this.utils.getDicLabel(100100, data.source);
            },
          },
          { label: "资产ID", prop: "id" },
          { label: "appID", prop: "assetCode" },
          { label: "域名", prop: "domain" },
          { label: "系统名称", prop: "assetName" },
          {
            label: "资产状态",
            prop: "status",
            formatter: (data) => {
              return this.utils.getDicLabel(100500, data.status);
            },
          },
          { label: "接入环境", prop: "scanDev" },
          { type: "slot", label: "git地址", prop: "gitList" },
          { label: "权属负责人", prop: "leader" },
          { label: "权属部门", prop: "dept2" },
          {
            label: "项目关注人",
            prop: "noticeUsers",
            formatter: (data) => {
              let noticeUsers = data.noticeUsers;
              if (Array.isArray(noticeUsers)) {
                return noticeUsers.map((e) => e.account).join(",");
              }
              return noticeUsers;
              // return this.utils.getDicLabel(101004, data.required);
            },
          },
          { label: "备注", prop: "remark1" },
        ],
        value: {},
        subsystemValue: {},
      },
      //指标信息
      indexInfo: {
        key: [
          { label: "指标名称", prop: "name" },
          {
            label: "指标来源",
            prop: "scene",
            formatter: (data) => {
              let t = "";
              if (Array.isArray(data.scene)) {
                data.scene.forEach((e) => {
                  t += this.utils.getDicLabel(101003, e) + ",";
                });
                return t.slice(0, -1);
              }
              return t;
            },
          },
          {
            label: "是否必须",
            prop: "required",
            formatter: (data) => {
              return this.utils.getDicLabel("required", data.required);
            },
          },
          {
            label: "是否自动化",
            prop: "auto",
            formatter: (data) => {
              return this.utils.getDicLabel("auto", data.auto);
            },
          },
          { label: "指标权重", prop: "weight" },
          {
            label: "是否启用",
            prop: "enable",
            formatter: (data) => {
              return this.utils.getDicLabel("enable", data.enable);
            },
          },
          { label: "指标要求", prop: "reportItemContent" },
          {
            label: "关联场景",
            prop: "linkedScenes",
            formatter: (data) => {
              let str = "";
              data.linkedScenes &&
                data.linkedScenes.forEach((item) => {
                  str += item.name + "，";
                });
              return str.slice(0, -1);
            },
          },
          { label: "创建人", prop: "creator" },
          { label: "创建时间", prop: "createTime" },
          { label: "更新人", prop: "domain" },
          { label: "更新时间", prop: "modifyTime" },
          { label: "备注", prop: "remark" },
        ],
        value: {},
      },
    };
  },
  computed: {
    assetType() {
      return this.$route.query.assetType;
    },
  },
  mounted() {
    this.query = this.$route.query;
    this.tabModel = this.query.tab ? this.query.tab : "风险信息";
    this.getRiskDetail();
    if (this.assetType === "SSO") {
      this.getSubsystemAssetsDetail();
    } else {
      this.getAssetsDetail();
    }
    this.itemGet();
  },
  methods: {
    tabClick() {
      this.$router.push({
        path: "/control/risk/detail",
        query: {
          riskId: this.query.riskId,
          assetId: this.query.assetId,
          assetType: this.query.assetType,
          code: this.query.code,
          tab: this.tabModel,
        },
      });
    },
    //风险信息
    getRiskDetail() {
      riskDetailApi({ riskId: this.query.riskId }).then((res) => {
        this.riskInfo.value = res.data;
      });
    },

    //资产信息
    getAssetsDetail() {
      if (this.assetType === "UPM") {
        upmAssetDetailApi({ id: this.query.assetId }).then((res) => {
          console.log("[ res.data ] >", res.data);
          this.upmContentData = res.data;
        });
      } else {
        assetsDetailApi({ id: this.query.assetId }).then((res) => {
          this.property.value = res.data;
        });
      }
    },
    //子系统资产信息
    getSubsystemAssetsDetail() {
      assetsSubsystemDetail({ id: this.query.assetId }).then((res) => {
        this.property.subsystemValue = res.data;
      });
    },
    //指标信息
    itemGet() {
      itemGetAPI({ code: this.query.code }).then((res) => {
        this.indexInfo.value = res.data;
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
